<template>
  <div class="myTable">
    <div class="titles row tc">
      <el-checkbox class="Acheck f1" v-model="select">全选</el-checkbox>
      <template v-for="item in title">
        <i
          :class="
            item.code == 'img' || item.code == 'num' || item.code == 'isbn'
              ? 'f2'
              : 'f1'
          "
          >{{ item.name }}</i
        >
      </template>
      <i class="Bcss titl f1">操作</i>
    </div>
    <div class="main">
      <template v-for="item in list">
        <div class="Missuer">
          <i>{{ item.issuerName }}</i
          ><i>联系</i>
        </div>
        <div class="SUBook">
          <template v-for="CBL in item.cartBookList">
            <div class="bookInfo row center tc">
              <el-checkbox class="Bcheck f1" v-model="CBL.check"></el-checkbox>
              <template v-for="att in title">
                <div v-if="att.code == 'img'" class="center img">
                  <img
                    width="100"
                    height="100"
                    class="attr"
                    :src="CBL[att.attr]"
                    alt=""
                  />
                </div>
                <i
                  class="attr text"
                  v-else-if="
                    att.code == 'text' ||
                    att.code == 'isbn' ||
                    att.code == 'countMoney'
                  "
                  ><i v-if="att.code == 'countMoney'">￥</i
                  >{{ CBL[att.attr] }}</i
                >
                <i class="nums" v-else-if="att.code == 'num'">
                  <el-button size="mini">-</el-button
                  ><i class="num">{{ CBL[att.attr] }}</i
                  ><el-button size="mini">+</el-button>
                </i>
              </template>
              <div class="BUtton f1 center">
                <el-button
                  type="danger "
                  icon="el-icon-delete"
                  circle
                ></el-button>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
    <!-- <div class="bottom ra">
      <i>已选:</i>
      <i>优惠:</i>
      <i>合计：￥<i>100</i></i>
      <el-button class="submit" type="danger">结算</el-button>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: false,
      title: [
        {
          name: "封面",
          attr: "coverPhoto",
          code: "img",
        },
        {
          name: "书名",
          attr: "bookName",
          code: "text",
        },
        {
          name: "ISBN",
          attr: "isbn",
          code: "text",
        },
        {
          name: "现价",
          attr: "nPrice",
          code: "text",
        },
        {
          name: "折后价",
          attr: "price",
          code: "text",
        },
        {
          name: "数量",
          attr: "cartNum",
          code: "num",
        },
        {
          name: "总价",
          attr: "countMoney",
          code: "countMoney",
        },
      ],
      list: [
        {
          address: "17栋111",
          issuerName: "商家",
          issuerId: 0,
          cartBookList: [
            {
              check: false,
              bookId: 0,
              bookName: "bookname",
              typeId: "",
              typeName: "",
              publisher: "出版社",
              author: "作者",
              nPrice: 10, //二手标价
              discount: 9, //折扣
              price: 9,
              pubDate: "2022-1-1", //出版日期
              createTime: "2022-1-1 12:11:30", //上架日期
              coverPhoto: require("@/assets/imgs/logo.png"), //封面
              isbn: "12234455",
              quantity: 10, //库存
              cartNum: 1,
              countMoney: 70,
              // this.cartBookList.price * this.cartBookList.cartNum,
            },
            {
              check: false,
              bookId: 0,
              bookName: "bookname",
              typeId: "",
              typeName: "",
              publisher: "出版社",
              author: "作者",
              nPrice: 10, //二手标价
              discount: 9, //折扣
              price: 9,
              pubDate: "2022-1-1", //出版日期
              createTime: "2022-1-1 12:11:30", //上架日期
              coverPhoto: require("@/assets/imgs/logo.png"), //封面
              isbn: "12234455sssss",
              quantity: 10, //库存
              cartNum: 1000,
              countMoney: 99,
            },
          ],
        },
        {
          address: "17栋111",
          issuerName: "商家",
          issuerId: 0,
          cartBookList: [
            {
              check: false,
              bookId: 0,
              bookName: "bookname",
              typeId: "",
              typeName: "",
              publisher: "出版社",
              author: "作者",
              nPrice: 10, //二手标价
              discount: 9, //折扣
              price: 9,
              pubDate: "2022-1-1", //出版日期
              createTime: "2022-1-1 12:11:30", //上架日期
              coverPhoto: require("@/assets/imgs/logo.png"), //封面
              isbn: "12234455",
              quantity: 10, //库存
              cartNum: 1,
            },
            {
              check: false,
              bookId: 0,
              bookName: "bookname",
              typeId: "",
              typeName: "",
              publisher: "出版社",
              author: "作者",
              nPrice: 10, //二手标价
              discount: 9, //折扣
              price: 9,
              pubDate: "2022-1-1", //出版日期
              createTime: "2022-1-1 12:11:30", //上架日期
              coverPhoto: require("@/assets/imgs/logo.png"), //封面
              isbn: "12234455sssss",
              quantity: 10, //库存
              cartNum: 1000,
            },
          ],
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.bbg {
  background: rgb(248, 245, 245);
}
.f1 {
  flex: 1;
}
.f2 {
  flex: 2;
}
.collit {
  color: lightgray;
}
.myTable {
  .titles {
    display: flex;
    font-size: 18px;
    line-height: 2;
    font-weight: 600;
    // background: lightcoral;
    i {
      color: rgb(53, 14, 151);
    }
  }
  .main {
    .Missuer {
      margin-left: 20px;
      margin-top: 20px;
      margin-bottom: 12px;
      padding-top: 20px;
    }
    .SUBook {
      // padding-left: 20px;
      // padding-right: 20px;
      display: flex;
      flex-flow: column nowrap;
      color: lightslategrey;
      .bookInfo {
        border-bottom: 1px solid lightgray;
        padding-top: 10px;
        padding-bottom: 10px;
        .text:nth-child(8) {
          font-size: 24px !important;
          color: red !important;
        }
      }
      .attr {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .img {
        .f2;
      }
      .text {
        .f1;
      }
      .check {
        .f1;
      }
      .nums {
        .f2;
        .num {
          margin-left: 10px;
          margin-right: 10px;
        }
      }
      .bbg;
    }
  }
}
.bottom {
  margin-top: 30px;
  background: lightgrey;
  padding-top: 10px;
  padding-bottom: 10px;
  i {
    line-height: 2;
    vertical-align: bottom;
  }
  .submit {
    padding-left: 40px;
    padding-right: 40px;
    // margin-top: 20px;
  }
}
</style>